<!-- Success -->
<div
  role="alert"
  class="flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
  <div class="flex gap-2 text-green-500 sm:gap-4">
    <span
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        class="icon icon-tabler icon-tabler-circle-check"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke="currentColor"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
      </svg>
    </span>
    <div class="flex items-start gap-4">
      <div class="flex-1">
        <strong class="block font-medium">Changes saved</strong>

        <p class="mt-2 text-sm text-slate-500 dark:text-slate-300">
          Your API key have been added successfully.
        </p>
      </div>
    </div>
  </div>
  <button
    class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
  >
    <span class="sr-only">Dismiss popup</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      class="h-5 w-5"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </button>
</div>
<!-- Warning -->
<div
  role="alert"
  class="flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
  <div class="flex gap-2 text-amber-500 sm:gap-4">
    <span
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        class="icon icon-tabler icon-tabler-circle-check"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke="currentColor"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
        <path d="M12 8v4"></path>
        <path d="M12 16h.01"></path>
      </svg>
    </span>
    <div class="flex items-start gap-4">
      <div class="flex-1">
        <strong class="block font-medium">Warning</strong>

        <p class="mt-2 text-sm text-slate-500 dark:text-slate-300">
          You have only 200 tokens left in the account.
        </p>
      </div>
    </div>
  </div>
  <button
    class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
  >
    <span class="sr-only">Dismiss popup</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      class="h-5 w-5"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </button>
</div>
<!-- Error -->
<div
  role="alert"
  class="flex w-full max-w-md items-start justify-between rounded-xl bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
  <div class="flex gap-2 text-red-500 sm:gap-4">
    <span
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        class="icon icon-tabler icon-tabler-circle-check"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke="currentColor"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M10 10l4 4m0 -4l-4 4"></path>
      </svg>
    </span>
    <div class="flex items-start gap-4">
      <div class="flex-1">
        <strong class="block font-medium">Error</strong>

        <p class="mt-2 text-sm text-slate-500 dark:text-slate-300">
          The specified model was not found. Try another model.
        </p>
      </div>
    </div>
  </div>
  <button
    class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
  >
    <span class="sr-only">Dismiss popup</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      class="h-5 w-5"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </button>
</div>
